<div th:fragment="left">
    <div class="left-menu fl">
        <div class="first-menu" id="project">
            <a href="javascript:void(0)">所有栏目</a>
        </div>
        <ul class="second-menu">
            <li  id="intro">
                <a href="/#/product/situation">概况</a>
            </li>
            <li>
                <a href="/#/product/model-list">模型模式</a>
            </li>
            <li>
                <a href="/#/product/myTrail">我的轨迹</a>
            </li>
        </ul>
        <div class="first-menu active" id="userPeo">
            <a href="javascript:void(0)">个人中心</a>
        </div>
        <ul class="second-menu">
            <li id="peo" class="active">
                <a href="/user/person.html">个人设置</a>
            </li>
        </ul>
    </div>
</div>
<script th:inline="javascript" th:fragment="left"  xmlns:th="http://www.thymeleaf.org">
    var menuObj;
    var leftMenu = $('.left-menu'),
            rightContent=$('.right-content');

    var firstMenu = $('.first-menu a'),
            secondMenu = $('.second-menu a');


    $(function(){
        menuObj = new menu();
    })

    function menu(){
        this.initHeight();
        this.bindClick(firstMenu);
        this.bindClick(secondMenu);
    }
    menu.prototype={
        //动态设置菜单高度
        initHeight:function(){
            leftMenu.css({
                minHeight:document.body.scrollHeight-104,
                height:rightContent.height()
            })
        },
        bindClick:function(obj){
            obj.click(function(){
                if(obj == firstMenu ){
                    secondMenu.parent().removeClass('active');
                    switch ($(this).html()){
                        case '所有栏目':
                            $('#intro').addClass('active');
                            break;
                        case '个人中心':
                            $('#peo').addClass('active');
                            break;
                    }
                }
                if(obj == secondMenu){
                    firstMenu.parent().removeClass('active');
                    if($(this).html() == '个人设置'){
                        $('#userPeo').addClass('active');
                    }else{
                        $('#project').addClass('active');
                    }
                }
                obj.parent().removeClass('active');
                $(this).parent().addClass('active');
            })
        }
    }
</script>

